<template>
    <div>
        <div style="margin: 10px 0">
            <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
            <el-button class="ml-5" type="primary" v-model="keyword" @click="load" >搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd" v-if="user.role === 'ROLE_ADMIN'">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定批量删除这些数据吗？"
                @confirm="delBatch"
            >
                <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>

        </div>
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="username" label="旅游服务中心名称"></el-table-column>
            <el-table-column prop="url" label="资质图片">
                <template slot-scope="scope">
                    <img :src="scope.row.picUrl" class="avatar"/>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述">
                <template slot-scope="scope">
                    <el-button @click="view(scope.row.content)" type="primary">查看内容</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="center">
                <el-button  type="primary" @click="dialogFormVisible = true"> <i class="el-icon-edit-outline"></i>审核</el-button>
                <template slot-scope="scope">
                    <el-popconfirm>
                        <el-button type="danger" slot="reference" v-if="user.role === 'ROLE_ADMIN'">删除 <i class="el-icon-remove-outline"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el_dialog title="旅游中心资质审核" :visible.sync="dialogFormVisible" width="60%" >
            <span>需要注意的是内容是默认不居中的</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible=false">取 消</el-button>
              <el-button type="primary" @click="submitApprove">确 定</el-button>
            </span>
        </el_dialog>>

    </div>
</template>

<script>

import axios from "axios";

export default {
    name: "Apporve",
    data() {
        return {
            form: {},
            tableData: [],
            name: '',
            keyword:'',
            multipleSelection: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            dialogFormVisible: false,
            teachers: [],
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            content: '',
            viewDialogVis: false
        }
    },
    created() {
        this.load()
    },
    methods: {
        view(content) {
            this.content = content
            this.viewDialogVis = true
        },
        // 绑定@imgAdd event
        imgAdd(pos, $file) {
            let $vm = this.$refs.md
            // 第一步.将图片上传到服务器.
            const formData = new FormData();
            formData.append('file', $file);
            axios({
                url: 'http://localhost:9090/file/upload',
                method: 'post',
                data: formData,
                headers: {'Content-Type': 'multipart/form-data'},
            }).then((res) => {
                // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
                $vm.$img2Url(pos, res.data);
            })
        },
        load() {
            this.request.get("/article/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.name,
                    keyword:this.keyword
                }
            }).then(res => {

                this.tableData = res.data.records
                this.total = res.data.total

            })

        },
        changeEnable(row) {
            this.request.post("/article/update", row).then(res => {
                if (res.code === '200') {
                    this.$message.success("操作成功")
                }
            })
        },
        handleAdd() {
            this.dialogFormVisible = true
            this.form = {}
        },
        handleEdit(row) {
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogFormVisible = true
        },
        del(id) {
            this.request.delete("/article/" + id).then(res => {
                if (res.code === '200') {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        handleSelectionChange(val) {
            console.log(val)
            this.multipleSelection = val
        },
        delBatch() {
            let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
            this.request.post("/article/del/batch", ids).then(res => {
                if (res.code === '200') {
                    this.$message.success("批量删除成功")
                    this.load()
                } else {
                    this.$message.error("批量删除失败")
                }
            })
        },
        save() {
            this.request.post("/article", this.form).then(res => {
                if (res.code === '200') {
                    this.$message.success("保存成功")
                    this.dialogFormVisible = false
                    this.load()
                } else {
                    this.$message.error("保存失败")
                }
            })
        },
        reset() {
            this.name = ""
            this.load()
        },
        handleSizeChange(pageSize) {
            console.log(pageSize)
            this.pageSize = pageSize
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        download(url) {
            window.open(url)
        },
        submitApprove(){

        }
    }
}
</script>

<style scoped>

</style>
